* {
  padding: 0;
  margin: 0;
}

html {
  /* 缅怀黑白 */
  /* filter: grayscale(100%); */
}

body {
  /* element色卡 */
  --white: #ffffff;
  --black: #000000;
  --blue: #6e8cd7;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --teal: #33b86c;
  --gray: #eef0f4;

  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
}

/* 明亮模式 */
:root[theme-mode='light'] {
  --gray-o1: rgba(255, 255, 255, 0.1);
  --gray-o5: rgba(255, 255, 255, 0.5);
  --gray-o3: rgba(255, 255, 255, 0.3);
  --gray-o7: rgba(255, 255, 255, 0.7);
  --gray-o9: rgba(255, 255, 255, 0.9);

  --gray-0: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-1000: #000000;

  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --yellow-500: #f59e0b;
  --yellow-600: #d97706;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
}

/* 暗夜模式 */
:root[theme-mode='dark'] {
}
